<template>
  <div class="login-container">
    <!--登录面板内容部分-->
    <div class="login-inner">
      <!--面板头部-->
      <div class="login-header">
        <div class="login-logo">
          <img src="./images/yy.jpg" alt="" width="150" />
        </div>
      </div>
      <!--面板表单部分-->
      <div class="login-content">
        <!--账号登录部分-->
        <form>
          <div class="current">
            <section class="login-message">
              <input type="text" maxlength="11" placeholder="用户名" v-model="user_name" />
            </section>
            <section class="login-verification">
              <input type="password" maxlength="18" placeholder="密码" v-if="pwdMode" v-model="pwd" />
              <input type="text" maxlength="18" placeholder="密码" v-else v-model="pwd" />
              <div class="switch-show">
                <!-- 阻止事件的默认行为 -->
                <img @click.prevent="dealPwdMode(false)" :class="{ on: pwdMode }" src="./images/hide_pwd.png" alt=""
                  width="20" />
                <img @click.prevent="dealPwdMode(true)" :class="{ on: !pwdMode }" src="./images/show_pwd.png" alt=""
                  width="20" />
              </div>
            </section>
          </div>
          <button class="login-submit" @click.prevent="login()">登录</button>
        </form>
        <button class="login-back" @click="$router.back()">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
import { adminLogin } from "../../api/index";

export default {
  name: "Login",
  data() {
    return {
      pwdMode: true, // 密码的显示方式 true 密文 false 明文
      pwd: "", // 密码
      user_name: "", // 用户名
      adminInfo: {},
    };
  },
  methods: {
    // 密码的显示方式
    dealPwdMode(flag) {
      this.pwdMode = flag;
    },
    // 登录
    async login() {
      // 前端校验
      if (!this.user_name) {
        MessageBox({
          type: "info",
          message: "请输入用户名",
          showClose: true,
        });
        return;
      } else if (!this.pwd) {
        MessageBox({
          type: "info",
          message: "请输入密码!",
          showClose: true,
        });
        return;
      }
      let result = await adminLogin(this.user_name, this.pwd);
      if (result.success_code === 200) {
        MessageBox({
          type: "success",
          message: result.message,
          showClose: true,
        });
        this.adminInfo.user_name = this.user_name;
        this.$router.replace("/admin");
        // localStorage属性在浏览器窗口关闭后还保留数据，该数据对象没有过期时间，除非手动删除。
        //JSON.stringify（）将adminInfo转化为字符串
        // setItem（）将数据添加到本地储存
        window.localStorage.setItem(
          "adminInfo",
          JSON.stringify(this.adminInfo)
        );
        // 手动删除本地储存
        window.localStorage.removeItem("userInfo");
      } else {
        MessageBox({
          type: "error",
          message: result.message,
          showClose: true,
        });
      }
    },
  },
};
</script>


<style>
body,
div,
span,
header,
footer,
nav,
section,
aside,
article,
ul,
dl,
dt,
dd,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
i,
b,
textarea,
button,
input,
select,
figure,
figcaption {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  font-weight: normal;
  font-family: "Microsoft Yahei";
  box-sizing: border-box;
  -webkit-tap-highlight-colortransparent-webkit-font-smoothing: antialiased;
}

body:hover,
div:hover,
span:hover,
header:hover,
footer:hover,
nav:hover,
section:hover,
aside:hover,
article:hover,
ul:hover,
dl:hover,
dt:hover,
dd:hover,
li:hover,
a:hover,
p:hover,
h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover,
i:hover,
b:hover,
textarea:hover,
button:hover,
input:hover,
select:hover,
figure:hover,
figcaption:hover {
  outline: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-1px::before {
    transform: scaleY(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .border-1px::before {
    transform: scaleY(0.3);
  }
}

clearFix {
  *zoom: 1;
}

clearFix::after {
  content: "";
  display: block;
  clear: both;
}

.login-container {
  width: 100%;
  height: 100%;
  background: #fff;
}

.login-container .login-inner {
  padding-top: 60px;
  width: 25%;
  margin: 0 auto;
}

.login-container .login-inner .login-header .login-logo {
  font-size: 20px;
  font-weight: bold;
  color: #9370db;
  text-align: center;
}

.login-container .login-inner .login-header .login-logo>a {
  color: #333;
  font-size: 14px;
  padding-bottom: 4px;
}

.login-container .login-inner .login-header .login-logo>a:first-child {
  margin-right: 40px;
}

.login-container .login-inner .login-header .login-logo>a.current {
  color: #9370db;
  font-weight: 700;
  border-bottom: 2px solid #9370db;
}

.login-container .login-inner .login-content>form>div {
  display: none;
}

.login-container .login-inner .login-content>form>div.current {
  display: block;
}

.login-container .login-inner .login-content>form>div input {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}

.login-container .login-inner .login-content>form>div input:focus {
  border: 1px solid #9370db;
}

.login-container .login-inner .login-content>form>div .login-message {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}

.login-container .login-inner .login-content>form>div .login-verification {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}

.login-container .login-inner .login-content>form>div .login-verification .switch-show {
  position: absolute;
  right: 10px;
  top: 12px;
}

.login-container .login-inner .login-content>form>div .login-verification .switch-show img {
  display: none;
}

.login-container .login-inner .login-content>form>div .login-verification .switch-show img.on {
  display: block;
}

.login-container .login-inner .login-content>form .login-submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 30px;
  border-radius: 4px;
  background: #9370db;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0;
}

.login-container .login-inner .login-content .login-back {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 15px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid #9370db;
  color: #9370db;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
}
</style>
